<template>
  <div class="app-container">
    <el-form v-model="appModel" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="name" label="APP名字">
            <el-input v-model="appModel.name" icon="search" name="title" placeholder="请输入名字"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="APP图标">
        <Input id="upClassImg" :value="appModel.cover.title" v-model="appModel.cover.url" :disabled="true" type="text" placeholder="请选择文件路径" style="width:300px"></Input>
        <input id="imgFile" class="file" name="file" value="请选择2文件" type="file" style="width:60px;float:right;height:36px;position:absolute;opacity:0;cursor:pointer;padding:20px" @change="updateApkIcon"></input>
        <el-button style="cursor:pointer">浏览</el-button><span><img src="http://qiniu.zhonglongedu.com/1539238021539" v-show="imgShow" style="width: 50px;height: 50px;width: 50px;height: 50px;position: absolute;top: -5px;left: 510px;"></span>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="packageName" label="APP包名">
            <el-input v-model="appModel.packageName" icon="search" name="title" placeholder="请输入名字"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="startUp" label="APP启动路径">
            <el-input v-model="appModel.startUp" icon="search" name="title" placeholder="请输入启动路径"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="文件上传">
        <el-input id="upClass" :disabled="true" v-model="appModel.attachment.title" type="text" placeholder="请选择文件路径" style="width:300px"/>
        <input id="inputFile" class="file" name="file" value="请选择2文件" type="file" style="width:60px;float:right;height:36px;position:absolute;opacity:0;cursor:pointer;padding:20px" @change="updateApkFile"></input>
        <el-button style="cursor:pointer">浏览</el-button><span><img src="http://qiniu.zhonglongedu.com/1539238021539" v-show="imgShowTubiao" style="width: 50px;height: 50px;width: 50px;height: 50px;position: absolute;top: -5px;left: 510px;"></span>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-top: 8px;margin-left: 20px;" :disabled = "buttonShow" @click="saveAppInfo(true)">确定</el-button>
    <el-button type="primary" v-show="!editable" style="margin-top: 8px;margin-left: 20px;" :disabled = "buttonShow" @click="saveAppInfo(false)">添加下一个</el-button>
  </div>
</template>

<script>
import { fetchList } from "@/api/article";
import axios from "axios";
import api from "@/api/upload";
import { cloneDeep, defaultsDeep } from "lodash";

const defaultAppModel = {
  attachment: {
    contentType: {
      code: "APK"
    },
    title: "",
    url: ""
  },
  cover: {
    title: "",
    url: ""
  },
  name: "",
  startUp: "",
  packageName: ""
};

export default {
  data() {
    return {
      imgShow: false,
      buttonShow: false,
      imgShowTubiao: false,
      appModel: cloneDeep(defaultAppModel),
      editable: false
    };
  },
  mounted() {
    let oid = this.$route.query.oid;
    if (oid) {
      this.editable = true;
      this.loadData(oid);
    }
  },
  methods: {
    loadData(oid) {
      api.appGet(oid).then(response => {
        this.appModel = response;
      });
    },
    // blurInputpackName() {
    //   var fi = document.getElementById("imgFile");
    //   fi.onchange = function() {
    //     this.fileData = this.value;
    //     document.getElementById("upClassImg").value = this.fileData;
    //   };
    // },
    updateApkIcon(e) {
      let fileDatapackName = e.target.files[0];
      if (
        fileDatapackName.type.indexOf("jpeg") <= 0 &&
        fileDatapackName.type.indexOf("png") <= 0
      ) {
        this.$message({
          showClose: true,
          message: "只能上传图片！",
          type: "error"
        });
        return false;
      }
      this.imgShow = true;
      this.buttonShow = true;
      axios.get("/qiniu/upload-token").then(res => {
        const data = new FormData();
        const nameDate = new Date().getTime();
        data.append("name", nameDate);
        data.append("key", nameDate);
        data.append("token", res.data.uploadToken);
        data.append("file", fileDatapackName);
        axios
          .post("http://upload.qiniu.com", data, { withCredentials: false })
          .then(response => {
            this.imgShow = false;
            this.buttonShow = false;
            this.appModel.cover.url =
              "http://qiniu.zhonglongedu.com/" + response.data.key;
            this.appModel.cover.title = fileDatapackName.name;
          });
      });
    },
    saveAppInfo(from) {
      api.saveAppInfo(this.appModel).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "添加成功！",
          type: "success"
        });
        if (from) {
          this.$router.push("/upload");
        } else {
          this.appModel = cloneDeep(defaultAppModel);
        }
      });
    },

    updateApkFile(e) {
      let fileData = e.target.files[0];
      if (fileData.type.indexOf("vnd.android.package-archive") <= 0) {
        this.$message({
          showClose: true,
          message: "只能上传apk文件！",
          type: "error"
        });
        return false;
      }
      this.imgShowTubiao = true;
      this.buttonShow = true;
      axios.get("/qiniu/upload-token").then(res => {
        const data = new FormData();
        const nameDate = new Date().getTime();
        const key = nameDate;
        data.append("name", nameDate);
        data.append("key", nameDate);
        data.append("token", res.data.uploadToken);
        data.append("file", fileData);
        axios
          .post("http://upload.qiniu.com", data, { withCredentials: false })
          .then(response => {
            this.imgShowTubiao = false;
            this.buttonShow = false;
            this.appModel.attachment.url =
              "http://qiniu.zhonglongedu.com/" + response.data.key;
            this.appModel.attachment.title = fileData.name;
          });
      });
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
#upClass,
#upClassImg {
  width: 420px;
  height: 35px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
